<template>
  <view class='order_detail-container'>
    <navbar :title="title"></navbar>
    <view v-if="inited">
      <view v-if="info">
        <view class="container">
          <view class="flex v">
            <view class="flex">
              <image class="cover" :src="info.productCoverUrl256" mode="aspectFill"></image>
              <view class="f1 flex v">
                <view class="f1">
                  <text class="title">{{ info.productTitle }}</text>
                </view>
                <text class="pay_fee">
                  <text class="unit">￥</text>
                  {{ info.wantFee / 100 }}
                </text>
              </view>
            </view>
            <view class="divider"></view>
            <text class="info-label">订单详情</text>
            <view class="row">
              <view class="f1">
                <text class="label">订单状态</text>
              </view>
              <text class="value status">{{ info.statusStr }}</text>
            </view>
            <view class="row" @click="copy(info.id)">
              <view class="f1">
                <text class="label">订单号</text>
              </view>
              <text class="value">{{ info.id }}</text>
            </view>
            <view class="row">
              <view class="f1">
                <text class="label">下单时间</text>
              </view>
              <text class="value">{{ info.createdAtStr }}</text>
            </view>
            <view class="row" v-if="info.payAt">
              <view class="f1">
                <text class="label">支付方式</text>
              </view>
              <text class="value">{{ info.channelStr }}</text>
            </view>
            <view class="row" v-if="info.payAt">
              <view class="f1">
                <text class="label">支付时间</text>
              </view>
              <text class="value">{{ info.payAtStr }}</text>
            </view>
            <view class="row">
              <view class="f1">
                <text class="label">商品总额</text>
              </view>
              <text class="value">{{ info.wantFee / 100 }}</text>
            </view>
            <view class="row" v-if="info.discount">
              <view class="f1">
                <text class="label">优惠金额</text>
              </view>
              <text class="value" style="color: red">-{{ info.discount / 100 }}</text>
            </view>
            <view class="flex">
              <!-- #ifdef MP-TOUTIAO -->
              <!--              <button class="refund-btn" open-type="im" v-if="info.status === 1 || info.status === 4"-->
              <!--                      :data-im-id="settings.douyinKefu">-->
              <!--                申请退款-->
              <!--              </button>-->
              <view v-if="(appType === 1 || appType === 3) && (info.status === 1 || info.status === 6)">
                <dy-pay-button
                    :mode="1"
                    :biz-line="2"
                    v-if="info.refundValid"
                    :goods-id="info.dyProductId" :goods-type="1" :order-status="dyRefundStatus" :order-id="info.id"
                    :refund-id="refundId"
                    :refund-total-amount="info.payFee">
                </dy-pay-button>
                <view class="refund-btn" v-else @click="onInvalidRefundBtnClick">申请售后</view>
              </view>
              <!-- #endif -->
              <view class="f1"></view>
              <text class="fee">{{ info.payAt ? '实付款：' : '待付款：' }}
                <text class="pay_fee">
                  {{ info.totalAmount / 100 }}
                </text>
              </text>
            </view>
          </view>
        </view>
        <view class="tips" v-if="appType !== 1 && appType !== 3">
          <text>如遇问题请联系售后客服：{{ settings.kefuPhone }}</text>
        </view>
<!--        <view class="tips" style="color: red">-->
          <!--          <button open-type="joinGroup" group-id="7268080873747022377" @joingroup="handleJoinGroup">加入粉丝群领取最新学习资料</button>-->
<!--        </view>-->
        <!-- #ifdef MP-TOUTIAO -->
        <dy-pay-button
            :mode="3"
            class="dy-buy-btn"
            :biz-line="2"
            v-if="info.status === 0"
            :goods-id="info.dyProductId" :goods-type="1" :order-status="0" :order-id="info.id"
            @paySuccess="onPaySuccess"
            :refund-total-amount="info.payFee">
        </dy-pay-button>
        <view class="study-btn" v-else-if="appType === 1 && info.status === 1 && dyRefundStatus!==3" @click="toStudy">
          开始学习
        </view>
        <!-- #endif -->
        <!-- #ifndef MP-TOUTIAO -->
        <view class="buy-btn" v-if="info.status === 0" @click="tryPay">立即支付</view>
        <!-- #endif -->
        <uni-popup ref="refundInvalidPopup" type="dialog" :mask-click="false">
          <view class="logout-dialog flex-col">
            <view class="body">
              <view class="title">不满足退款条件</view>
              <view class="content">购后7天未学满5%才可退，如有其他问题请联系授课老师</view>
            </view>
            <view class="footer flex-row">
              <view class="btn center" @click="refundInvalidPopupClose">确定</view>
              <button class="btn primary center" open-type="im" :data-im-id="settings.douyinKefu">联系客服</button>
            </view>
          </view>
        </uni-popup>
        <Pay ref="pay" @success="onPaySuccess"></Pay>
      </view>
    </view>
    <view v-else
          style="display: flex;justify-content: center;flex-direction: column;align-items: center; margin-top: 200rpx;font-size: 16px;color: #999"
          @click="copy(id)">
      <view v-if="error">订单异常：{{ id }}</view>
      <view v-if="error">{{errorMsg}}</view>
      <view v-else>加载中...</view>
    </view>
    <LoginView ref="loginView"></LoginView>
  </view>
</template>

<script>
import Navbar from "@/components/navbar";
import {orderApi} from "@/api";
import {mapGetters, mapActions} from 'vuex';
import LoginView from "@/components/LoginView/LoginView";
import Pay from "@/components/Pay.vue";
import utils from "@/libs/utils";

export default {
  name: 'order_detail',
  components: {LoginView, Navbar, Pay},
  data() {
    return {
      title: '订单详情',
      id: null,
      info: null,
      inited: false,
      error: false,
      errorMsg: null,
    }
  },
  computed: {
    ...mapGetters(['settings', 'platform', 'appType']),
    lastRefund() {
      if (this.info && this.info.refunds && this.info.refunds.length) {
        return this.info.refunds[this.info.refunds.length - 1]
      }

      return null
    },
    refundId() {
      if (this.lastRefund) {
        return this.lastRefund.id
      }
    },
    dyRefundStatus() {
      if (this.lastRefund) {
        if (this.lastRefund.auditStatus === 0) {
          return 2 // 退款中
        }

        if (this.lastRefund.auditStatus === 1) {
          return 3 // 退款成功
        }

        return 4 // 退款失败
      }

      return 1
    }
  },
  async onLoad({id}) {
    this.id = id
    console.log('this.id', this.id)
    uni.setNavigationBarTitle({
      title: this.title
    })
    this.init()
  },
  async onPullDownRefresh() {
    await this.init()
    uni.stopPullDownRefresh();
  },
  methods: {
    ...mapActions(['refreshUser']),
    copy(str) {
      uni.setClipboardData({
        data: str,
        success: () => {
          uni.showToast({
            title: '复制成功！',
            icon: 'none',
            duration: 2000
          });
        }
      });
    },
    refundInvalidPopupClose() {
      this.$refs.refundInvalidPopup.close()
    },
    onInvalidRefundBtnClick() {
      this.$refs.refundInvalidPopup.open()
    },
    async init() {
      try {
        const res = await orderApi.info(this.id)
        this.info = res.data.data
        this.inited = true
      } catch (e) {
        this.error = true
        this.errorMsg = e.message
        console.log(e)
        uni.showToast({
          title: e.message || '订单异常',
          icon: 'none',
          duration: 2000
        });
      }
    },
    showLogin() {
      this.$refs.loginView.open()
    },
    tryPay() {
      this.$refs.pay.open({mode: 'order', order: this.info})
    },
    toStudy() {
      if (this.dyRefundStatus === 2) {
        uni.showToast({
          title: '正在申请退款中，课程不可用！',
          icon: 'none',
          duration: 2000
        });
        return
      }

      uni.navigateTo({
        url: '/pages/course_enter/course_enter?order_id=' + this.info.id
      });
    },
    onPaySuccess() {
      this.refreshUser()
      this.init()
    }
  }
}
</script>

<style lang='scss'>
page {
  background-color: #f7f7f7;
}

.order_detail-container {
  .container {
    margin: 30rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 30rpx;

    .cover {
      width: 176rpx;
      height: 176rpx;
      margin-right: 24rpx;
      border-radius: 16rpx;
    }

    .title {
      font-size: 15px;
      line-height: 22px;
      color: #000;
      font-weight: bold;
    }

    .pay_fee {
      color: #F8330B;
      font-size: 22px;
      font-weight: bold;

      .unit {
        font-size: 15px;
      }
    }

    .divider {
      background-color: #E2E2E2;
      height: 1px;
      margin-top: 30rpx;
      margin-bottom: 40rpx;
    }

    .info-label {
      color: #28343A;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 20rpx;
    }

    .row {
      display: flex;
      line-height: 80rpx;
      font-size: 14px;
      color: #121212;

      .status {
        color: #F8330B;
      }
    }

    .fee {
      font-weight: bold;
      color: #000;
    }
  }

  .refund-btn {
    height: 56rpx;
    line-height: 56rpx;
    padding: 0 40rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30rpx;
    border: 1px solid #CBC9C9;
    font-size: 12px;
    color: #121212;

    &:after {
      border: none;
    }
  }

  .buy-btn {
    background-color: #FE2C55;
    height: 98rpx;
    border-radius: 50rpx;
    color: #fff;
    font-size: 18px;
    position: fixed;
    left: 56rpx;
    right: 56rpx;
    bottom: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .study-btn {
    background-color: #3073F6;
    height: 98rpx;
    border-radius: 50rpx;
    color: #fff;
    font-size: 15px;
    position: fixed;
    left: 56rpx;
    right: 56rpx;
    bottom: 56rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .dy-buy-btn {
    height: 98rpx;
    position: fixed;
    left: 50rpx;
    right: 50rpx;
    bottom: 56rpx;
    display: flex;
  }

  .need-login-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 400rpx;

    .login-btn {
      height: 64rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 14px;
      color: #3274F6FF;
      margin-top: 30rpx;
      border-radius: 40rpx;
      border: 1px solid #3274f6;
      padding: 0 30rpx;
    }
  }

  .tips {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100rpx;
  }

  .logout-dialog {
    border-radius: 24upx;
    background-color: #fff;
    width: 578upx;
    box-sizing: border-box;

    .body {
      margin: 48upx 60upx 52upx 60upx;
    }

    .title {
      font-size: 18px;
      color: #000;
      margin-bottom: 20rpx;
      text-align: center;
    }

    .content {
      font-size: 16px;
      color: #999;
      text-align: center;
      line-height: 1.5em;
    }

    .footer {
      padding: 0 32upx 52upx 32upx;

      .btn {
        flex: 1;
        height: 82upx;
        font-size: 30upx;
        background-color: #ededed;
        border-radius: 42upx;
        margin-left: 28upx;

        &:first-child {
          margin-left: 0;
        }

        &.primary {
          background-color: #3073f6;
          color: #fff;
        }
      }
    }
  }
}
</style>
